import React from 'react'
import { List, InputItem, NavBar, Icon, Grid } from 'antd-mobile'
import { connect } from 'react-redux'

import { sendMsg, updateMessage, getMessages } from '@/redux/Chat.redux'
import { getPreyList } from '@/redux/Prey.redux'
import styles from './index.module.scss'
const Item = List.Item
const faces = '😄 😃 😀 😊 😉 😍 😘 😚 😗 😙 😜 😝 😛 😳 😁 😔 😌 😒 😞 😣 😢 😂 😭 😪 😥 😰 😅 😓 😩 😫 😨 😱 😠 😡 😤 😖 😆 😋 😷 😎 😴'
const data = faces
                .split(' ')
                .filter(item => item)
                .map(item => ({text: item}))
@connect(
    state => ({
        user: state.user.user,
        chat: state.chat,
        prey: state.prey
    }),
    { sendMsg, updateMessage, getPreyList, getMessages }
)
class Chat extends React.Component{

    constructor(props){
        super(props)
        this.state = {
            content: '',
            showFace: false
        }
        this.send = this.send.bind(this)
        this.back = this.back.bind(this)
        this.face = this.face.bind(this)
    }

    componentDidMount(){
        const { prey: {preyList}, chat: { messages } } = this.props
        if(!messages.length) this.props.getMessages()
        if(!preyList.length) this.props.getPreyList()
        this.adjustment()
    }

    componentWillUnmount(){
        const { match , user } = this.props
        this.props.updateMessage(match.params.id, user._id)
    }

    send(){
        const { content } = this.state
        if(!content) return
        const { user, match } = this.props
        this.props.sendMsg(user._id, match.params.id, content)
        this.setState({ content: '' })
    }

    back(){
        this.props.history.go(-1)
    }

    face(){
        this.setState({
            showFace: !this.state.showFace
        })
        this.adjustment()
    }
    //修复滑动九宫格bug
    adjustment(){
        setTimeout(function(){
            window.dispatchEvent(new Event('resize'))
        },0)
    }

    render(){
        //setTimeout(() => {
        //    window.scrollTo(0,837)
        //}, 100)
        const { user , match, chat: {messages}, prey: { preyList } } = this.props
        let group = '', username = '',avatar = ''
        if(preyList.length){
            let target = preyList.find(item => item._id === match.params.id)
            username = target.username
            avatar = target.avatar
        }
        return preyList.length && user._id ? (
            <div className={styles['chat-container']} style={{ paddingBottom: this.state.showFace ? 177 : 44 }}>
                <NavBar
                    mode="dark"
                    icon={<Icon type="left" />}
                    onLeftClick={this.back}
                    className={styles['header']}
                >{username}</NavBar>
                { match.params.id && (group = [user._id,match.params.id].sort().join('_')) &&
                    messages
                        .filter(item => {
                            return item.group === group
                        })
                        .map(item => {
                            if(item.from === user._id){
                                return (
                                    <List key={item._id} className={styles['sentence']}>
                                        <Item extra={<img src={ require(`@/assets/images/avatar/${user.avatar}.png`) }
                                        alt="avatar"/>}>{item.content}</Item>
                                    </List>
                                )
                            }else{
                                return (
                                    <List key={item._id}>
                                        <Item
                                            thumb={require(`@/assets/images/avatar/${avatar}.png`)}
                                        >{item.content}</Item>
                                    </List>
                                )
                            }
                        })
                }
                <div className={styles['input-container']}>
                    <List>
                        <InputItem
                            placeholder="请输入..."
                            value={this.state.content}
                            onChange={ v => {
                            this.setState({content: v})
                        }}
                            extra={
                                <div className={styles['button-container']}>
                                    <span className={styles['face']} onClick={this.face} aria-label="jsx-a11y/aria-proptypes" role="img">😄</span>
                                    <span onClick={this.send} className={styles['send']}>发送</span>
                                </div>
                            }
                        />
                        { this.state.showFace && <Grid
                                className={styles['face-container']}
                                data={data}
                                columnNum={9}
                                carouselMaxRow={3}
                                isCarousel={true}
                                onClick={(e) => {
                                    this.setState({
                                        content: this.state.content + e.text
                                    })
                                }}
                            >
                            </Grid>
                        }
                    </List>
                </div>
            </div>
        ) : null
    }
}

export default Chat